<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
 
    <h:head>
        <title>All about My Book - Resenhas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="${verDetalhesLivroBean.linkCssLayoutPagina}" />
		<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
		<link href="CSS/posicaoDoMenu.css" rel="stylesheet" type="text/css" />
		<script src="javascript/paraListagemDeResenhas.js"></script>
    </h:head>
    <h:body>
    <f:metadata>
        <f:event type="preRenderView" listener="#{verDetalhesLivroBean.carregarCSSLayoutParaQualquerPagina}"/>
	</f:metadata>
    <div id='conteudoPagina'>
    	<f:view>
		<!-- vamos primeiro definir o menu que ficará no canto esquerdo da página -->
   		<div id='cssmenu'>
        	<ul>
            	<li class='active '><a href='index.xhtml'><span>Home</span></a></li>
            	<li><h:form><h:commandLink action="#{listarPersonagensDoLivroBean.listarPersonagensLivro}"><span>Personagens</span></h:commandLink></h:form></li>
            	<li><h:form><h:commandLink action ="#{verTodosOsPontosPositivosDoLivro.pegarTodosOsPontosPositivosDoLivro}"><span>Pontos positivos do livro</span></h:commandLink></h:form></li>
            	<li><h:form><h:commandLink action = "#{verResenhasBean.pegarTitulosNotasDeTodasAsResenhas}"><span>Resenhas</span></h:commandLink></h:form></li>
            	<li><h:form><h:commandLink action="#{verForumBean.verTopicosDoForum}"><span>Fórum</span></h:commandLink></h:form></li>
            	<li><a href='paginaDeAutenticacao.xhtml'><span>Editar Site</span></a></li>
        	</ul>
    	</div>
  		<!-- agora, vamos descrever o resto do site que não é menu. E vamos separá-los em um div  
        	gigante-->
  		<div id='conteudoPagina'>
  		<p:messages></p:messages>
  		<table cellspacing="30">
  		<tr>
  		<td colspan = "2" style = "text-align:center">
    		<h1> Resenhas </h1>
        </td>
        </tr>    
    	<c:forEach var="entry" items="${verResenhasBean.titulosNotasDeTodasAsResenhas}">
    		<tr>
    		<h:form>
    			<td style = "vertical-align:middle">
    			<h:commandButton value = "${entry.key}" action = "#{mostrarPaginaDeUmaResenha.mostrarPaginaResenha}">
    			<f:param name = "tituloResenha" value = "${entry.key}"></f:param>
    			</h:commandButton>
    			</td>
    			<td style = "vertical-align:middle">
    			<img src = "CSS/images/bom.png" name = "${entry.value}" />
    			</td>
    		</h:form>
    		</tr>
    	</c:forEach>
    	<tr>
    	<td>
    		<h:form>
    		<h:commandButton value = "mostrar resenhas da rede social Revish" action = "#{pegarResenhasLivroViaRevishBean.procurarResenhaDoLivroNaRevish}">
    			<f:param name = "tituloLivro" value = "#{verDetalhesLivroBean.tituloDoLivro}"></f:param>
    		</h:commandButton>
    		</h:form>
    	</td>
    	</tr>
    	
    	</table>
    	
    	<script>
    		desenharEstrelinhasNosTitulosDasResenhas();
    	</script>
    	<button style="position:fixed;bottom:3%;right: 83%;font-size: 24px;font-family:Showcard Gothic;" onclick="parent.location='criarnovaresenha.xhtml'">Criar Resenha</button> 
  		</div>
		</f:view>
    </div>	
    </h:body>
</html>